<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:layOut="http://www.w3.org/1999/xhtml"
      layOut:decorator="layOut/layOut">
<head>
    <title>用户新增</title>
    <style>
        .main-container .layui-form-item {
            padding-right: 45px;
        }
    </style>
</head>
<body>
<form class="layui-form" id="theForm">
    <div class="mainBox" th:fragment="theForm">
        <div class="main-container">
            <div class="layui-form-item">
                <label class="layui-form-label" for="name">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" th:value="${user.name}" lay-verify="title"
                           autocomplete="off" placeholder="请输入" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="account">账户</label>
                <div class="layui-input-block">
                    <input type="text" name="account" id="account" th:value="${user.account}" lay-verify="title"
                           autocomplete="off" placeholder="请输入" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="password">密码</label>
                <div class="layui-input-block">
                    <input type="text" name="password" id="password" th:value="${user.password}" lay-verify="title"
                           autocomplete="off" placeholder="请输入" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="orgName">组织</label>
                <div class="layui-input-block">
                    <input type="hidden" name="orgId" id="orgId" th:value="${user.orgId}"/>
                    <input type="text" name="orgName" id="orgName" th:value="${user.orgName}" lay-verify="title"
                           autocomplete="off" placeholder="请输入" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="sex">性别</label>
                <div class="layui-input-block">
                    <input type="text" name="sex" id="sex" th:value="${user.sex}" lay-verify="title"
                           autocomplete="off" placeholder="请输入" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="sex">年龄</label>
                <div class="layui-input-block">
                    <input type="text" name="age" id="age" th:value="${user.age}" lay-verify="title"
                           autocomplete="off" placeholder="请输入" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="idCard">身份证号</label>
                <div class="layui-input-block">
                    <input type="text" name="idCard" id="idCard" th:value="${user.idCard}" lay-verify="title"
                           autocomplete="off" placeholder="请输入" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="bottom" th:fragment="theBtn">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="completeFilter">
                <i class="layui-icon layui-icon-ok"></i>提交
            </button>
        </div>
    </div>
</form>
<script type="text/javascript">
    layui.use(['form','jquery'], function() {
        let form = layui.form;
        let $ = layui.jquery;
        form.on('submit(completeFilter)', function(data) {
            var fromData = $("#theForm").serialize();
            console.log(fromData)
            $.post("/user/saveOrUpdate" ,fromData ,function (data) {
                if (data.status === 200) {
                    console.log("成功返回")
                }
                layer.msg(data.msg, {
                    icon: 1,       //信息框与加载层的私有参数
                    time: 1500     //意思是2.5秒后自动关闭
                }, function () {   //关闭弹出框后执行的函数
                    console.log("后端返回" + data.msg)
                });
            });
            return false;
        });
        $("#orgName").change(function () {
            $("#orgId").val($("#orgName").val());
        })

    })
</script>
</body>
</html>